<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <script src="/script/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="/script/admin/inviteImg/request.js"></script>
</head>
<body>
<div id="app">
    <el-form ref="addForm" :model="addForm" label-width="80px" :rules="rules">
        <el-form-item label="类型">
            <el-select v-model="addForm.imgType" disabled="true" placeholder="请选择图片类型">
                <el-option label="爆款好物群" value="GOODS"></el-option>
                <el-option label="撸单群" value="COUPON"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
            <el-input v-model="addForm.description"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="url">
            <el-upload
                    :key="this.refreshKey"
                    class="avatar-uploader"
                    :action="'/admin/inviteImg/'+this.id+'/uploadImg'"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                <img width="100" height="100" v-if="addForm.url" :src="addForm.url" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                id:'[(${id})]',
                addForm:{
                    imgType:'',
                    url:'',
                    description:''
                },
                rules: {
                    description: [
                        {
                            required: true,
                            message: '请填写描述',
                            trigger: 'blur',
                        },
                    ],
                    url: [
                        {
                            required: true,
                            message: '请上传图片',
                            trigger: 'blur',
                        },
                    ],
                },
                refreshKey:0,
            }
        },
        methods: {
            detail() {
                detail(this.id).then(res => {
                    this.addForm = res;
                })
            },
            handleAvatarSuccess(res, file) {
                this.$set(this.addForm, 'url', res.data.src);
                this.refreshKey++;
            },
            save() {
                this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        put(this.id, this.addForm).then(res => {
                            this.$message.success('保存成功')
                        }).catch(err => {
                            this.$message.error('保存失败')
                        })
                    }
                })
            }
        },
        computed:{
        },
        created () {
            this.detail();
        }
    })
</script>
</html>


